<template>
  <div class="folder-form" :class="{'no-padding': opType === '2'}">
    <el-form
      v-if="opType === '1'"
      class="form"
      size="small"
      ref="form"
      :model="form"
      :rules="formRules"
      label-width="77px"
      :show-message="false">
      <el-form-item :label="$t('名称')" prop="name">
        <el-input
          v-model="form.name"
          class="full-width"
          clearable
          maxlength="20"
          :show-word-limit="false"></el-input>
      </el-form-item>
      <el-form-item :label="$t('类型')">
        <el-select class="full-width" disabled v-model="form.type" :placeholder="$t('请选择')">
          <el-option
            v-for="(o) in fileTypeOpts"
            :key="o.value"
            :value="o.value"
            :label="o.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('目录')">
        <el-select-tree
          class="full-width"
          disabled
          v-model="form.folderId"
          :placeholder="$t('请选择')"
          :data="treeData"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children'
          }">
        </el-select-tree>
      </el-form-item>
      <el-form-item :label="$t('媒体文件夹')">
        <el-select-tree
          class="full-width"
          check-strictly
          v-model="form.attributes.mediaFolderId"
          :data="treeData"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children'
          }">
        </el-select-tree>
      </el-form-item>
      <el-form-item :label="$t('媒体类型')">
        <el-select class="full-width" v-model="form.folderType" :placeholder="$t('请选择')">
          <el-option :value="1" :label="$t('视频')"></el-option>
          <el-option :value="2" :label="$t('图片')"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('排序依据')">
            <el-select class="input-140" v-model="form.attributes.sort" :placeholder="$t('请选择')">
              <el-option
                v-for="(o) in sortOpts"
                :key="o.value"
                :value="o.value"
                :label="o.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="label-ml9" :label="$t('排序规则')">
            <el-select class="input-140" v-model="form.attributes.orders" :placeholder="$t('请选择')">
              <el-option
                v-for="(o) in ordersOpts"
                :key="o.value"
                :value="o.value"
                :label="$t(o.label)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('每页时长')">
            <el-input-number
              :disabled="form.folderType === 1"
              v-model="form.duration"
              class="input-140"
              :min="0"
              :max="1000"
              controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="label-ml9" :label="$t('播放效果')">
            <el-select
              class="input-140"
              v-model="form.attributes.effect"
              :disabled="form.folderType === 1"
              :placeholder="$t('无效果')" clearable>
              <el-option
                v-for="op in picturePlayArray"
                :key="op.value"
                :label="op.name"
                :value="op.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('声音')">
            <el-input-number
              :disabled="form.folderType === 2"
              class="input-140" :min="0" :max="100" v-model="form.sound" controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="label-ml9" :label="$t('锁定比例')">
            <el-checkbox
              v-model="form.attributes.fixedRatio"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


    <edit-base-form
      ref="editForm"
      :is-folder="true"
      v-else-if="opType === '2'"
      :form="form"
      :rules="formRules">
      <el-form-item :label="$t('媒体文件夹')">
        <el-select-tree
          class="full-width"
          v-model="form.attributes.mediaFolderId"
          :data="treeData"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children'
          }">
        </el-select-tree>
      </el-form-item>
      <el-form-item :label="$t('媒体类型')">
        <el-select class="full-width" v-model="form.folderType" :placeholder="$t('请选择')">
          <el-option :value="1" :label="$t('视频')"></el-option>
          <el-option :value="2" :label="$t('图片')"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('排序依据')">
            <el-select class="input-140" v-model="form.attributes.sort" :placeholder="$t('请选择')">
              <el-option
                v-for="(o) in sortOpts"
                :key="o.value"
                :value="o.value"
                :label="$t(o.label)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="label-ml9" :label="$t('排序规则')">
            <el-select class="input-140" v-model="form.attributes.orders" :placeholder="$t('请选择')">
              <el-option
                v-for="(o) in ordersOpts"
                :key="o.value"
                :value="o.value"
                :label="$t(o.label)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('每页时长')">
            <el-input-number
              :value="form.duration"
              class="input-140"
              :min="0"
              :max="1000"
              :disabled="form.folderType === 1"
              controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="label-ml9" :label="$t('播放效果')">
            <el-select
              :disabled="form.folderType === 1"
              class="input-140"
              v-model="form.attributes.effect"
              :placeholder="$t('无效果')">
              <el-option
                v-for="op in picturePlayArray"
                :key="op.value"
                :label="op.name"
                :value="op.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="声音">
            <el-input-number
              :disabled="form.folderType === 2"
              class="input-140"
              :min="0"
              :max="100"
              v-model="form.sound"
              controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('锁定比例')">
            <el-checkbox v-model="form.attributes.fixedRatio"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </edit-base-form>
  </div>
</template>

<script>
import EditBaseForm from './EditBaseForm'
import {fileTypeOpts} from '../../const'
import {picturePlayArray} from '@/const'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters} = createNamespacedHelpers('media')

export default {
  components: {
    EditBaseForm
  },
  props: {
    opType: {
      type: String,
      default: '1'
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      picturePlayArray,
      sortOpts: [
        {label: '名称', value: '1'},
        {label: '上传时间', value: '2'}
      ],
      ordersOpts: [
        {label: '升序', value: 'asc'},
        {label: '降序', value: 'desc'}
      ],
      fileTypeOpts,
      formRules: {
        name: [
          { required: true, message: '名称不能为空' }
        ]
      }
    }
  },
  methods: {
    validate(cb) {
      if (this.opType === '1') {
        this.$refs.form.validate(cb)
      } else {
        this.$refs.editForm.$refs.form.validate(cb)
      }
    },
    clearValidate(params) {
      if (this.opType === '1') {
        this.$refs.form.clearValidate(params)
      } else {
        this.$refs.editForm.$refs.form.clearValidate(params)
      }
    }
  },
  computed: {
    ...mapGetters(['menuTree']),
    treeData() {
      return this.menuTree(1)
    },
  }
}
</script>

<style lang="scss" scoped>
.folder-form {
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;

  ::v-deep .el-form-item__label {
    padding-right: 5px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
  .label-ml9 {
    ::v-deep .el-form-item__label {
      margin-left: 8px;
    }
  }
}
.no-padding {
  padding: 0;
}
.full-width {
  width: 380px;
}
.input-140 {
  width: 140px;
}
</style>